<!-- <template>
    <div>
      <div class="jnhfxq_box">
        <div class="jnhfxq_box_title">缴纳会费</div>
        <div class="jnhfxq_nr_box jnhfxq_nr_box_input1">
          <div class="jnhfxq_nr_box_input">
            <el-input placeholder="请输入单位" v-model="input1" :disabled="true">
              <template slot="prepend">单位：</template>
            </el-input>
          </div>
          <div class="jnhfxq_nr_box_input">
            <el-input placeholder="请输入会员号" v-model="input1" :disabled="true">
              <template slot="prepend">会员号：</template>
            </el-input>
          </div>
          <div class="jnhfxq_nr_box_input">
            <el-input placeholder="请输入年度" v-model="input1" :disabled="true">
              <template slot="prepend">年度：</template>
            </el-input>
          </div>
          <div class="jnhfxq_nr_box_input">
            <el-input placeholder="请输入缴费金额" v-model="input1" :disabled="true">
              <template slot="prepend">缴费金额：</template>
            </el-input>
          </div>
          <div class="jnhfxq_nr_box_input">
            <el-input placeholder="请输入单位" v-model="input1" :disabled="true">
              <template slot="prepend">单位：</template>
            </el-input>
          </div>
          <div class="jnhfxq_nr_box_input">
            <el-input placeholder="请输入会员号" v-model="input1" :disabled="true">
              <template slot="prepend">会员号：</template>
            </el-input>
          </div>
          <div class="jnhfxq_nr_box_input">
            <el-input placeholder="请输入年度" v-model="input1" :disabled="true">
              <template slot="prepend">年度：</template>
            </el-input>
          </div>
          <div class="jnhfxq_nr_box_input">
            <el-input placeholder="请输入缴费金额" v-model="input1" :disabled="true">
              <template slot="prepend">缴费金额：</template>
            </el-input>
          </div>
        </div>
        
        <div class="jnhfxq2_pz">
          <div class="jnhfxq2_pz_title">上传凭证：</div>
          <div class="jnhfxq2_pz_upload">
            <el-upload
              class="jnhfxq2_pz_uploadbox"
              action="http://lutuxiehui.82.kssite.cn/index/ajax/upload"
              list-type="picture-card"
              :on-success="handleSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
            <span class="uploadpz">请上传缴费凭证</span>
          </div>
        </div>
        <div class="button_box_hfxq2">
          <el-button type="primary" @click="Submit()">提交</el-button>
        </div>
      </div>
    </div>
  </template>
    <script>
  export default {
    data() {
      return {
          show:false,
          dialogImageUrl:'',
          dialogVisible:false,
          input1:'111',
       
      };
    },
    mounted() {},
    methods: {
     
      /**
       * 上传凭证
       */
       handleSuccess(response, file, fileList){
          console.log(response, file, fileList)
       },
       /**
        * 凭证预览
        */
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
        /**
         * 上传删除
         */
         handleRemove(){
  
         },
         /**
          * 上传申请
          */
          Submit(){
          }
      //  ==
    },
  };
  </script>
    <style>
  .jnhfxq_box {
    background: #ffffff;
    border-radius: 0.125rem;
    box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.15);
    margin: 0.125rem 0.025rem 0.1rem 0.625rem;
    padding-bottom: 0.4875rem;
  }
  .jnhfxq_box_title {
    height: 0.9rem;
    text-align: center;
    line-height: 1rem;
    font-size: 0.25rem;
    font-weight: 400;
    color: #333333;
  }
  .jnhfxq_nr_box {
    width: 14rem;
    border-top: 0.0375rem dotted #dddd;
    margin: auto;
    font-size: 0.225rem;
    font-weight: 400;
    color: #333333;
    padding-top: 0.1375rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .jnhfxq_nr_box_input {
    width: 48%;
    margin-top: 0.25rem;
  }
  .jnhfxq_nr_box_input .el-input-group__prepend {
    width: 68px;
  }
  
  .button_box_hfxq2 .el-button {
    width: 2.5rem;
  }
  .button_box_hfxq2 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
  }
  .jnhfxq2_pz {
    display: flex;
    align-items: center;
    width: 14rem;
    margin: auto;
    border: 1px solid #e8eaee;
    height: 1.125rem;
    margin-top: 0.25rem;

  }
  .jnhfxq2_pz_title {
    width: 1.25rem;
    background: #f2f2f2;
    border-radius: 0.025rem 0px 0px 0.025rem;
    font-size: 0.2rem;
    font-weight: 400;
    color: #333333;
    line-height: 1.125rem;
    text-align: center;
  }
  .jnhfxq2_pz_upload {
    display: flex;
    align-items: center;
    padding-left: 0.275rem;
    box-sizing: border-box;
  }
  .jnhfxq2_pz_uploadbox .el-upload--picture-card {
    width: 0.8875rem;
    height: 0.8875rem;
    line-height: 1rem;
    background: #f2f2f2;
  }
  .jnhfxq2_pz_uploadbox .el-upload--picture-card i {
    font-size: 0.35rem;
  }
  .uploadpz {
    font-size: 0.175rem;
    font-weight: 400;
    color: #333333;
    margin-left: .1375rem;
  }
  .jnhfxq2_pz_uploadbox .el-upload-list--picture-card .el-upload-list__item{
      width: .9rem;
      height: .9rem;
  }
  .jnhfxq_nr_box_input1 .el-input.is-disabled .el-input__inner{
    background: #ffffff;
    color: #333333;
  }
  </style> -->